<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>经营概况</span>
            </div>
        </template>
        <el-row :gutter="12">
            <el-col :span="4" v-for="item in 11">
                <el-card shadow="always">
                    <p class="title">订单待办</p>
                    <p>待发货0|代售后0</p>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
    <div class="data">
        <el-row :gutter="12">
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户增长数据</span>
                        </div>
                    </template>
                    <div ref="echarts1" style="height: 350px;border-bottom: 1px solid;">

                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户增长数据</span>
                        </div>
                    </template>
                    <div ref="echarts2" style="height: 350px;border-bottom: 1px solid;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户增长数据</span>
                        </div>
                    </template>
                    <div style="height: 350px;border-bottom: 1px solid;">
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户增长数据</span>
                        </div>
                    </template>
                    <div style="height: 350px;border-bottom: 1px solid;">
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div>
        <el-row :gutter="12">
            <el-col :span="12">

                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基本信息</span>
                        </div>
                    </template>
                    <div style="height: 350px;">
                    </div>
                </el-card>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基本信息</span>
                        </div>
                    </template>
                    <div>
                        <el-table :data="tableData" :show-header="false" style="width: 100%">
                            <el-table-column width="180px">
                                <template #default="scope">
                                    <span>{{ scope.row.date }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="Name" />
                        </el-table>
                    </div>
                </el-card>

            </el-col>
        </el-row>
        <el-row :gutter="12">
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>

</template>

<script setup>
import { onMounted, reactive, ref } from "vue"
import { data } from "../api/home"
import * as echarts from 'echarts';
const tableData = reactive([
    {
        date: '2016-05-03',
        name: 'Tom',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
])

let echarts1 = ref()
let echarts2 = ref()

let option1 = reactive({
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
})
let option2 = reactive({
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
})

function getData() {
    data().then(res => {
        console.log(res)
        if (res.code === 0) {
            // const xAxis = 
            option1.xAxis.data = res.data.users.map(item=>item.day)
            option1.series[0].data = res.data.users.map(item=>item.number)
            let biaoge1 = echarts.init(echarts1.value)
            biaoge1.setOption(option1)
        }

    })
}




onMounted(() => {

    let biaoge2 = echarts.init(echarts2.value)
    biaoge2.setOption(option2)
    getData()
})


</script>


<style lang="scss" scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    margin-bottom: 10px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-col {
        margin-bottom: 10px;

        .el-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;

            :deep(.el-card__body) {
                text-align: center;
            }
        }

        .el-card:hover {
            background: hotpink;
            color: #fff;
        }
    }
}
</style>